<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Vue 2 图片切换（无样式）</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <h2>Vue 2 图片切换展示（无样式）</h2>

        <!-- 动态绑定图片的 src 和 alt -->
        <div>
            <img 
                :src="currentImage.url" 
                :alt="currentImage.alt"
            />
        </div>

        <div>
            <button @click="prevImage">上一张</button>
            <button @click="nextImage">下一张</button>
        </div>

        <div>
            当前显示第 {{ currentIndex + 1 }} 张，共 {{ images.length }} 张
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                currentIndex: 0, // 当前显示的图片索引
                images: [
                    { url: 'https://picsum.photos/400/300?random=1', alt: '随机图片 1' },
                    { url: 'https://picsum.photos/400/300?random=2', alt: '随机图片 2' },
                    { url: 'https://picsum.photos/400/300?random=3', alt: '随机图片 3' },
                    { url: 'https://picsum.photos/400/300?random=4', alt: '随机图片 4' }
                ]
            },
            computed: {
                // 当前显示的图片对象
                currentImage: function () {
                    return this.images[this.currentIndex];
                }
            },
            methods: {
                // 切换到上一张图片
                prevImage: function () {
                    if (this.currentIndex === 0) {
                        this.currentIndex = this.images.length - 1; // 循环到最后一张
                    } else {
                        this.currentIndex--;
                    }
                },
                // 切换到下一张图片
                nextImage: function () {
                    if (this.currentIndex === this.images.length - 1) {
                        this.currentIndex = 0; // 循环到第一张
                    } else {
                        this.currentIndex++;
                    }
                }
            }
        });
    </script>
</body>

</html>